<template>
  <div class="w-[800px] p-4 print-style-landscape bg-white">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[24px]">{{ getSystemConfig('HISNAME') }}</div>
      <BaseBarcode :value="tableData[0]?.barcode" :height="40" class="w-60 text-right" />
    </div>
    <div class="text-center text-[16px] font-bold">静脉输液巡视卡</div>

    <div class="flex-1 mt-4">
      <div class="flex items-center mb-3">
        <div class="mr-20">
          <span>{{ tableData[0]?.brName }}</span>
          <span class="mx-6">{{ tableData[0]?.brXb }}</span>
          <span>{{ tableData[0]?.brAge }}</span>
        </div>
        <span>床位:{{ tableData[0]?.wardbed }}</span>
        <span class="mx-24">住院号:{{ tableData[0]?.inplsh }}</span>
        <span class="ml-20">日期: {{ dayjs().format('YYYY-MM-DD') }}</span>
      </div>
      <!-- border border-solid border-t-0 border-l-0 -->
      <div class="print-table">
        <div class="flex w-full">
          <div class="print-table-item w-[90px]">时间</div>
          <div class="print-table-item flex-1">输入液体量及药物</div>
          <div class="print-table-item w-[110px]">滴速/分钟</div>
          <div class="print-table-item w-[110px]">局部情况</div>
          <div class="print-table-item w-[110px]">全身情况</div>
          <div class="print-table-item w-[105px]">签名</div>
        </div>
        <div v-for="(item, index) in tableData" :key="index">
          <div class="flex w-full">
            <div class="print-table-item w-[90px]"></div>
            <div class="print-table-item flex-1 flex items-center">
              <div v-if="item.list.length > 1" class="link-border-print"></div>
              <div>
                <div v-for="row in item.list" :key="row.mcjldwgg">
                  {{ row.mcjldwgg }}
                </div>
              </div>
            </div>
            <div class="print-table-item w-[110px]"></div>
            <div class="print-table-item w-[110px]"></div>
            <div class="print-table-item w-[110px]"></div>
            <div class="print-table-item w-[105px]"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})
const tableData = ref([])
watch(
  () => props.printData,
  (val) => {
    // 使用 reduce 方法来分组对象

    tableData.value = val.printData.detail.reduce((acc, item) => {
      const parentId = item.parentId
      // 检查累加器中是否已经有这个barcode的条目
      if (!acc.some((group) => group.parentId === parentId)) {
        // 如果没有，则创建一个新的条目
        acc.push({
          ...item,
          list: []
        })
      }
      // 找到对应的barcode条目，并向其list中添加yzmc和rq
      const group = acc.find((g) => g.parentId === parentId)
      group?.list.push({ ...item })
      return acc
    }, [])
  }
)
</script>
<style lang="less" scoped>
.table-border {
  @apply border border-solid  p-1;
}

.link-border-print {
  width: 8px;
  height: 95%;
  margin: 0 5px;
  border: 2px solid #000000;
  border-right: none;
}
</style>
